<template>
  <div style="width: 1200px;margin: 0 auto">
  <el-row :gutter="20">
    <el-col :span="18">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="12" style="display: flex; align-items: center; justify-content: flex-end;width: 100%">
            <el-avatar :src=userDetail.avatar size="large" style="margin-right: 20px; transform: translateY(-20px);"></el-avatar>            <div style="display: flex; align-items: center;">
              <div>
                <p style="color: #666;font-weight: bold;" @click="">用户中心{{userDetail.phone}}</p>
                <a href="#" style="color: #4a68ad; text-decoration: none;">+你从事什么职业?<br>+你的信仰是什么？</a>
                <el-divider></el-divider>
                <p  style="text-align: left; margin-right: 30px; font-size: 14px;">获取奖章0</p>
              </div>
            <div style="display: flex; justify-content: space-between;">
              <div class="right">
                <el-button style="border-color: #007fff;" @click="manage()">设置</el-button>
              </div>
            </div>
            </div>
          </el-col>
          <el-col :span="12">
            <p style="color: #a3c3fc;font-size: 25px;margin: 73px 0 0 50px">篝火币：{{userDetail.balance}}
              <el-button style="margin: 0 0 0 50px" type="primary" @click="withdrawal">提现</el-button>
            </p>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin-top: 20px">
        <el-menu mode="horizontal" router active-text-color="orange">
          <el-menu-item index="/personal/posts">文章</el-menu-item>
<!--          <el-menu-item index="/personal/columns">评论</el-menu-item>-->
          <el-menu-item index="/personal/pins">点赞</el-menu-item>
          <el-menu-item index="/personal/collections">收藏文章</el-menu-item>
          <el-menu-item index="/personal/tags">篝火币充值</el-menu-item>
        </el-menu>

        <router-view/>
      </el-card>

<!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--          <el-tab-pane label="动态" name="first">动态</el-tab-pane>-->
<!--          <el-tab-pane label="文章" name="second">文章</el-tab-pane>-->
<!--          <el-tab-pane label="专栏" name="third">专栏</el-tab-pane>-->
<!--          <el-tab-pane label="沸点" name="fourth">沸点</el-tab-pane>-->
<!--          <el-tab-pane id="Favorites" label="收藏集" name="fifth">收藏集</el-tab-pane>-->
<!--          <el-tab-pane id="follow with interest" label="关注" name="sixth">关注</el-tab-pane>-->
<!--          <el-tab-pane  icon="el-icon-search" label="赞" name="seventh">赞</el-tab-pane>-->
<!--        </el-tabs>-->

    </el-col>

      <el-col :span="6">
        <el-card >
          <div style="display: flex; justify-content: center;">
            <router-link to="/personal/tags" style="text-align: center; text-decoration: none; color: #000000;">
              <div>关注了</div>
              <div>0</div>
            </router-link>
            <el-divider direction="vertical"></el-divider>
            <router-link to="/personal/tags" style="text-align: center; text-decoration: none; color: #000000;">
              <div>关注者</div>
              <div>0</div>
            </router-link>
          </div>
        </el-card>
        <el-divider></el-divider>
        <router-link to="/personal/collections" style="font-size: 16px; color: #000; display: flex; justify-content: space-between; text-decoration: none;">
          收藏夹
        </router-link>

        <el-divider></el-divider>
        <router-link to="/personal/tags" style="font-size: 16px; color: #000; display: flex; justify-content: space-between; text-decoration: none;">
          关注标签
        </router-link>

        <el-divider></el-divider>
        <a  target="_blank" style="font-size: 16px; color: #000; display: flex; justify-content: space-between; text-decoration: none;">
          <div>加入于</div>
          <div>2023-11-27</div>
        </a >
        <el-divider></el-divider>
        <a  target="_blank" style="font-size: 16px; color: #000; display: flex; justify-content: space-between; text-decoration: none;">
          <div>辉常包歉!这里已经木有内容啦...</div>
          <el-empty
              image="../uuu.jpg"
              description="鸭！下面东西不见了..."
          />
        </a >
        <el-divider></el-divider>
      </el-col>
  </el-row>
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import tokenAxios from "@/http/request/TokenAxios";
import {ElMessage} from "element-plus";

const manage = ()=>{
    router.push('/manage');
}

const userDetail = ref({});

onMounted(()=>{
  // console.log(getUser().id)
  tokenAxios.get(BASE_URL+":49280/users/"+getUser().id)
  .then((response)=>{
    if (response.state===20000){
      userDetail.value=response.data;
      // console.log(userDetail.value)
    }else {
      ElMessage.error("用户信息查询错误，请等待")
    }
  })
})

const withdrawal=()=>{
  tokenAxios.get(BASE_URL+":49283/reward/withdrawCash")
      .then((response)=>{
        if(response.state===20000){
          ElMessage.success("成功提现");
        }
        ElMessage.error(response.message)
      })
}

</script>

<style scoped>

</style>